


<template>
    <div class="about">
      <div class="container" v-if="isShowWarning">
        <div class="ico"></div>
      </div>
      <topBar :title="aboutTitle">
        <!-- <template #weather>
          <div class="pos">
            <img
              class="weather-icon"
              :src="nowDayIcon"
              style="width:0.5rem;vertical-align: middle;"
              alt
            />
            <span class="weather-temp">{{ tmpNew }}°C{{ briefNew }}</span>
          </div>
        </template>-->
      </topBar>
      <div class="aboutContainer">
        
        <div class="containLeft">
          <div class="flex leftT">
            <div class="MonitorRunning">
              <h1>当前状态值</h1>
              <div id="gaugePanel" :style="sypanel2"></div>
              <div class="running flex">
                <div class="run">
                  <img src="../assets/image/1.png" alt />
                  <p>网络传输</p>
                  <span class="successtag">[正常]</span>
                </div>
                <div class="run">
                  <img src="../assets/image/2.png" alt />
                  <p>防护栏</p>
                  <span class="successtag">[正常]</span>
                </div>
                <div class="run">
                  <img src="../assets/image/3.png" alt />
                  <p>感应器</p>
                  <span class="successtag">[正常]</span>
                </div>
              </div>
            </div>
          </div>
  
          <div class="wetstatus leftB">
            <h1>监控运行</h1>
            <div class="elbox1 boxW">
              <div class="left">
                <span>A区</span>
                <img src="../assets/image/wedet.png" alt />
              </div>
              <div class="center">
                <p>
                  <span>温度：</span>
                  <span class="strong">{{tem?tem:'--'}}</span>
                  <span>℃</span>
                </p>
                <p>
                  <span>湿度：</span>
                  <span class="strong">{{hum?hum:'--'}}</span>
                  <span>%</span>
                </p>
              </div>
              <div class="right">
                <div class="successState" v-if="tem">正常</div>
                <br />
                <div class="successState mt" v-if="hum">正常</div>
              </div>
            </div>
            <div class="elbox1 boxW">
              <div class="left">
                <span>--区</span>
                <img src="../assets/image/wedet.png" alt />
              </div>
              <div class="center">
                <p>
                  <span>温度：</span>
                  <span class="strong">--</span>
                  <span>℃</span>
                </p>
                <p>
                  <span>湿度：</span>
                  <span class="strong">--</span>
                  <span>%</span>
                </p>
              </div>
              <div class="right">
                <!-- <div class="successState">正常</div>
                <br />
                <div class="successState mt">正常</div>-->
              </div>
            </div>
            <div class="elbox1 boxW">
              <div class="left">
                <span>B区</span>
                <img src="../assets/image/wedet.png" alt />
              </div>
              <div class="center">
                <p>
                  <span>温度：</span>
                  <span class="strong">--</span>
                  <span>℃</span>
                </p>
                <p>
                  <span>湿度：</span>
                  <span class="strong">--</span>
                  <span>%</span>
                </p>
              </div>
              <div class="right">
                <!-- <div class="successState">正常</div>
                <br />
                <div class="successState mt">正常</div>-->
              </div>
            </div>
            <div class="elbox1 boxW">
              <div class="left">
                <span>D区</span>
                <img src="../assets/image/wedet.png" alt />
              </div>
              <div class="center">
                <p>
                  <span>温度：</span>
                  <span class="strong">--</span>
                  <span>℃</span>
                </p>
                <p>
                  <span>湿度：</span>
                  <span class="strong">--</span>
                  <span>%</span>
                </p>
              </div>
              <div class="right">
                <!-- <div class="successState">正常</div>
                <br />
                <div class="successState mt">正常</div>-->
              </div>
            </div>
          </div>
        </div>
        <div class="elbox1 containcenterBox">
          <div class="containcenter">
            <div class="containcenter_con">
              <p class="containcenter_top_title2">IoT人员行动轨迹——红木库房</p>
              <!-- <img style="width:100%;height:100%" src="../assets/image/center.png" alt /> -->
              <!-- <div class="personDesc">
                <p>
                  <img src="../../public/image/3.png" alt />
                  <span>工作人员</span>
                </p>
                <p>
                  <img src="../../public/image/0.png" alt />
                  <span>参观嘉宾</span>
                </p>
              </div> -->
              <div
                style="position: absolute;top:56%;left:50%; transform: translate(-50%, -50%);z-index:100000;width:100%;height:90%"
              >
              <!-- 库房地图 -->
                <MapWrap />
              </div>
            </div>
          </div>
        </div>
        <div class="containRight">
          <div class="r_status">
            <div class="left">
              <p class="ab l-value">监控预警</p>
              <img src="../assets/image/r_1.png" alt />
              <div class="flex ab2" style="width:96%;">
                <div style="margin-left:5%;width:100%;font-size: .14rem;">
                  <p v-if="!isShowWarning" style="white-space: nowrap;text-align: center;">暂无预警信息</p>
                  <p
                    class="time"
                  >{{warningtimestamps.length>0?warningtimestamps[0].timestamp.dateTime[0].time:''}}</p>
                  <p
                    class="events"
                  >{{warningtimestamps.length>0?warningtimestamps[0].timestamp.dateTime[0].event:''}}</p>
                </div>
                <p style="align-self: center;height:50%">
                  <img src="../assets/image/expand.png" alt />
                </p>
              </div>
            </div>
            <div class="right">
              <p class="ab l-value2">天气</p>
              <img src="../assets/image/r_2.png" alt />
              <div class="pos">
                <img
                  class="weather-icon"
                  :src="nowDayIcon"
                  style="width:0.5rem;vertical-align: middle;font-size: .14rem;"
                  alt
                />
                <span class="weather-temp">{{ tmpNew }}°C</span>
                <span>{{ briefNew }}</span>
              </div>
            </div>
          </div>
          <div class="checkStatus">
            <p class="containcenter_top_title">巡检状态</p>
            <div id="box">
              <p class="wrapBoxFlex center pTitle">
                <span>检查名称</span>
                <span>巡检次数</span>
                <span>当前状态</span>
              </p>
              <ul id="con2" ref="con2" :class="{ anim: animate == true }">
                <li class="wrapBoxFlex center" v-for="(item, index) in items2" :key="index">
                  <!-- <p class="li_absolute">{{ item.num }}</p> -->
                  <span class="noWarp">{{ item.num }}</span>
                  <span class="noWarp">{{ item.date }}</span>
                  <span :class="item.reson ? 'success' : 'fail'">
                    {{
                    item.reson ? "正常" : "异常"
                    }}
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="elbox2">
            <p class="containcenter_top_title3">巡检记录</p>
            <div class="checkOrder">
              <div
                v-for="(item, index) in timestamps"
                :class="'timeline'+index"
                class="timeline"
                :key="'item' + index"
              >
                <time-line :timestamp="item.timestamp" @over="over" @leave="leave" :type="2" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  let gaugePanel;
  import { baseEnv } from "@/request";
  import topBar from "@/components/topBar.vue";
  import MapWrap from "@/components/map.vue";
  // import MapWrap from "@/components/map_copy.vue";
  import { renderTime, weekDay, timeAt } from "@/utils/utils";
  let echarts = require("echarts/lib/echarts");
  const APIURL = require("../../public/ipConfigtest");
  let baseUrl;
  let time1, time2, time3, time4, time5, time6, time7;
  let timer = null;
  // import topBar from "@/components/topBar.vue";
  // 引入饼状图组件
  require("echarts/lib/chart/pie");
  // 引入提示框和title组件
  require("echarts/lib/component/tooltip");
  require("echarts/lib/component/title");
  export default {
    data() {
      return {
        isShowWarning: false,
        sypanel1: "width: 100%; height: 25.7%",
        sypanel2: "width: 100%; ",
  
        aboutTitle: "",
        dailyArr: [],
        curIndex: null,
        timeDate: "", // 日期
        cloudSpeed: "",
        wetNum: "",
        city: "",
        tmpNew: "", //温度
        briefNew: "", // 天气
        nowDayIcon: "",
        weekDay: "",
        precip: "",
        hum: null,
        tem: null,
        timestamps: [
          {
            timestamp: {
              date: time1,
              isCurent: false,
              isLast: false,
              dateTime: [
                {
                  time: "8:00",
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 0.77,
                }
              ]
            }
          },
          {
            timestamp: {
              date: time2,
              isCurent: false,
              dateTime: [
                {
                  time: "8:45",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "8:55",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          },
          {
            timestamp: {
              date: time3,
              isCurent: false,
              dateTime: [
                {
                  time: "8:00",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "8:21",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          },
          {
            timestamp: {
              date: time4,
              isCurent: false,
              dateTime: [
                {
                  time: "9:00",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "9:21",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          },
          {
            timestamp: {
              date: time5,
              isCurent: false,
              dateTime: [
                {
                  time: "8:00",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "8:21",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          },
          {
            timestamp: {
              date: time6,
              isCurent: false,
              dateTime: [
                {
                  time: "6:05",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "6:11",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          },
          {
            timestamp: {
              date: time7,
              isCurent: false,
              dateTime: [
                {
                  time: "15:00",
                  isGet: true, //提现
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                  // sumMoney: 21.0,
                },
                {
                  time: "14:21",
                  isGet: true,
                  event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                }
              ]
            }
          }
        ],
        warningtimestamps: [],
        workingStatus: [
          // {
          //   name: "摄像头",
          //   status: "正常",
          //   icon: "el-icon-video-camera"
          // },
          {
            name: "感应器",
            status: "正常",
            icon: "el-icon-data-line"
          },
          {
            name: "网络传输",
            status: "正常",
            icon: "el-icon-odometer"
          },
          {
            name: "防护栏",
            status: "正常",
            icon: "el-icon-s-data"
          }
        ],
        dialogTableVisible: false,
        imgShiDu: require("../assets/icon/shidu.png"),
        imgTemperature: require("../assets/icon/wenshidutemperature.png"),
        animate: false,
        items2: [
          //消息列表对应的数组
          {
            num: "货架巡检",
            date: "7",
            reson: true
          },
          {
            num: "库区巡检",
            date: "8",
            reson: true
          },
          {
            num: "设备巡检",
            date: "3",
            reson: true
          },
          {
            num: "基站巡检",
            date: "16",
            reson: true
          },
          {
            num: "网络巡检",
            date: "7",
            reson: true
          },
          {
            num: "货架巡检",
            date: "7",
            reson: true
          },
          {
            num: "库区巡检",
            date: "8",
            reson: true
          },
          {
            num: "设备巡检",
            date: "3",
            reson: true
          },
          {
            num: "基站巡检",
            date: "16",
            reson: true
          },
          {
            num: "网络巡检",
            date: "7",
            reson: true
          }
        ],
        totalNum: "52235",
        addNum: "2120",
        monitorState: 95,
        arr: [
          "窍号[Q01GYQV33L]，调阅时间超长",
          "窍号[Q01GYQV49L]，调阅时间超长",
          "窍号[Q01GYQV69L]，调阅时间超长"
        ],
        number: 0,
        number2: -1
      };
    },
    components: {
      topBar,
      MapWrap
    },
    beforeMount() {
      if (window.outerWidth <= 768) {
        this.sypanel1 = {
          height: "8.4rem"
        };
        this.sypanel2 = {
          height: "25%"
        };
      }
    },
    mounted() {
      var dt = new Date();
      let month = parseInt(dt.getMonth() + 1);
      let day = dt.getDate();
      let Minutes = dt.getMinutes();
      if (Minutes < 10) {
        Minutes = "0" + Minutes;
      }
      let linetime1 = dt.getHours() + ":" + Minutes;
      let linetime2 =
        parseInt(dt.getHours() - 1) + ":" + parseInt(parseInt(Minutes) - 1);
      let linetime3 =
        parseInt(dt.getHours() - 2) + ":" + parseInt(parseInt(Minutes) - 1);
      time1 = month + "月" + day + "日";
      time2 = month + "月" + parseInt(parseInt(day) - parseInt(1)) + "日";
      time3 = month + "月" + parseInt(parseInt(day) - parseInt(2)) + "日";
      time4 = month + "月" + parseInt(parseInt(day) - parseInt(3)) + "日";
      time5 = month + "月" + parseInt(parseInt(day) - parseInt(4)) + "日";
      time6 = month + "月" + parseInt(parseInt(day) - parseInt(5)) + "日";
      time7 = month + "月" + parseInt(parseInt(day) - parseInt(6)) + "日";
      this.timestamps = [
        // {
        //   timestamp: {
        //     date: "2021年",
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "",
        //         event: ""
        //         // sumMoney: 0.77,
        //       }
        //     ]
        //   }
        // },
        {
          timestamp: {
            date: time1,
            isCurent: false,
            isLast: false,
            dateTime: [
              {
                time: linetime1,
                event: "库房自动化设备运行状态巡检 [殷孝雅]  正常"
                // sumMoney: 0.77,
              },
              {
                time: linetime2,
                event: "库区温湿度巡检 [殷孝雅]  正常"
                // sumMoney: 0.77,
              },
              {
                time: linetime3,
                event: "库房货架安全检查 [殷孝雅]  正常"
                // sumMoney: 0.77,
              }
            ]
          }
        },
  
        {
          timestamp: {
            date: time2,
            isCurent: false,
            isLast: true,
            dateTime: [
              {
                time: "9:30",
                event: "室内定位基站巡检 [殷孝雅]  正常"
                // sumMoney: 0.77,
              },
              {
                time: "14:00",
                event: "库房货架安全检查 [殷孝雅]  正常"
                // sumMoney: 0.77,
              }
            ]
          }
        }
  
        // {
        //   timestamp: {
        //     date: time2,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "8:45",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "8:55",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // },
        // {
        //   timestamp: {
        //     date: time3,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "8:00",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "8:21",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // },
        // {
        //   timestamp: {
        //     date: time4,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "9:00",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "9:21",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // },
        // {
        //   timestamp: {
        //     date: time5,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "8:00",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "8:21",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // },
        // {
        //   timestamp: {
        //     date: time6,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "6:05",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "6:11",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // },
        // {
        //   timestamp: {
        //     date: time7,
        //     isCurent: false,
        //     dateTime: [
        //       {
        //         time: "15:00",
        //         isGet: true, //提现
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //         // sumMoney: 21.0,
        //       },
        //       {
        //         time: "14:21",
        //         isGet: true,
        //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
        //       }
        //     ]
        //   }
        // }
      ];
      baseUrl = "/customer-aim";
      // if (baseEnv == "development") {
      //   baseUrl = "/b";
      // } else {
      //   // baseUrl = "http://demo.qcdoc.cn/customer-aim";
      //   baseUrl = "http://demo.qcdoc.cn/customer-aim";
      //   // baseUrl = `${APIURL.BASE_URL}`;
      // }
      this.updatewarning();
      let title = this.$route.query.title;
      console.log(123,title);
      
      this.aboutTitle = "档案集约化全景平台";
      // switch (title) {
      //   case "济南市":
      //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
      //     this.city = title;
      //     this.monitorState = 92;
      //     break;
      //   case "金华市":
      //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
      //     this.city = title;
      //     this.monitorState = 93;
      //     break;
      //   case "无锡市":
      //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
      this.city = title || "苏州";
      //     this.monitorState = 93;
      //     break;
      //   case "上海市":
      //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
      //     this.city = title;
      //     this.monitorState = 94;
      //     break;
      //   case "南京市":
      //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
      //     this.city = title;
      //     this.monitorState = 90;
      //     break;
      //   default:
      //     this.aboutTitle = "档案集约化全景平台";
      //     break;
      // }
  
      this.timer2 = setInterval(this.scroll2, 3000);
      this.searchWeather();
      let angle = 0; //角度，用来做简单的动画效果的
      let value = 93;
      let timerId = null;
      if (gaugePanel != null && gaugePanel != "" && gaugePanel != "undefined") {
        gaugePanel.dispose();
      }
      gaugePanel = echarts.init(document.getElementById("gaugePanel"));
      let option = {
        title: {
          text: "{a|" + value + "\n" + "}{c|}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: this.$fontSize.fontSize(0.3),
                color: "#29EEF3"
              }
              // c: {
              //   fontSize: 20,
              //   color: "#ffffff"
              //   // padding: [5,0]
              // }
            }
          }
        },
        // backgroundColor: "#08B0F9",
        // title: [
        //   {
        //     text: "档案中心监控状态",
        //     top: "10%",
        //     x: "center",
        //     borderColor: "#fff",
        //     borderWidth: 1,
        //     borderRadius: 10,
        //     // padding: [
        //     //   this.$fontSize.fontSize(0.07),
        //     //   this.$fontSize.fontSize(0.14),
        //     // ],
        //     textStyle: {
        //       fontWeight: "normal",
        //       fontSize: 12,
        //       color: "#fff"
        //     }
        //   }
        // ],
        angleAxis: {
          show: false,
          max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
          type: "value",
          startAngle: 225, //极坐标初始角度
          splitLine: {
            show: false
          }
        },
        barMaxWidth: this.$fontSize.fontSize(0.1), //最大宽度圆环宽度
        radiusAxis: {
          show: false,
          type: "category"
        },
        //圆环位置和大小
        polar: {
          center: ["50%", "50%"], //中心（圆心）坐标
          radius: "120%" //仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
        },
        series: [
          {
            type: "pie",
            name: "外层细圆环",
            radius: ["98%", "100%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: "#47C9FFFF"
              }
            },
            label: {
              show: false
            },
            data: [300]
          },
          {
            name: "",
            type: "pie",
            radius: ["85%", "70%"],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center"
              }
            },
            data: [
              {
                value: value,
                name: "",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00EDF3" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#646CF9" // 100% 处的颜色
                        }
                      ]
                    }
                  }
                }
              },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              }
            ]
          },
          //仪表盘
          {
            name: "仪表盘",
            type: "gauge",
            startAngle: 225, //起始角度，同极坐标
            endAngle: -45, //终止角度，同极坐标
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              formatter: function() {
                return "优";
              },
              color: "#000",
              fontSize: this.$fontSize.fontSize(0.12),
              offsetCenter: ["5%", "40%"],
              backgroundColor: "#00FF5FFF",
              borderRadius: this.$fontSize.fontSize(0.08),
              padding: [
                this.$fontSize.fontSize(0.04),
                this.$fontSize.fontSize(0.1)
              ]
            }
            // data: [
            //   {
            //     value: this.monitorState,
            //     name: this.monitorState
            //   }
            // ]
          }
        ]
      };
  
      function draw() {
        angle = angle + 3;
        // myChart.setOption(option, true);
        gaugePanel.setOption(option, true);
        window.addEventListener("resize", function() {
          gaugePanel.resize();
        });
        //window.requestAnimationFrame(draw);
      }
      if (timerId) {
        clearInterval(timerId);
      }
      timerId = setInterval(function() {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },
    watch: {
      // "obj.a": {
      //   handler(newName, oldName) {
      //     console.log("obj.a changed");
      //   },
      //   immediate: true,
      //   // deep: true,
      // },
      // warningtimestamps:{
      //   handler(newName,oldName){
      //   },
      //   deep:true
      // }
    },
    destroyed() {
      clearInterval(this.timer1);
      clearInterval(this.timer2);
      clearInterval(timer);
    },
    methods: {
      updatewarning() {
        timer = setInterval(() => {
          // this.axios
          //   .get(`${baseUrl}/location/getRichAlarm?floorId=2`)
          //   .then(res => {
              // let data = res.data.data || null;
              let data = {
                alarmTime: '1855555526',
                alarmDesc: '哈哈哈哈哈哈'
              }
              if (data) {
                this.isShowWarning = true; // 隐藏
                // console.log(this.isShowWarning, "隐藏");
                this.warningtimestamps.unshift({
                  timestamp: {
                    date: renderTime(data.alarmTime),
                    isCurent: false,
                    dateTime: [
                      {
                        time: timeAt(data.alarmTime),
                        event: data.alarmDesc
                        // sumMoney: 0.77,
                      }
                    ]
                  }
                });
              } else {
                this.isShowWarning = false; // 展示
                this.warningtimestamps = [];
                console.log(this.isShowWarning, "展示");
              }
            // });
  
  
  
          this.axios
            .get(`${baseUrl}/hygrother/getValue?id=30041945`)
            .then(res => {
              let data = res.data.data || null;
              if (data) {
                (this.tem = data.tem || 22.5), (this.hum = data.hum || 42.8);
              } else {
                this.tem = 22.5;
                this.hum = 42.8;
              }
            });
        }, 2000);
      },
      searchWeather: async function() {
        //注意：这里有 async 用来完成异步操作
        let key = "cc947e6d58bc4e06b122ec72e5ee3e10"; //引号中放入前面保存的key
        //获取城市的ID
        let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=${key}`;
        let res = await fetch(httpUrl);
        let result = await res.json();
        let id = result.location[0].id;
        //根据城市id获取具体的天气
        let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key}`;
        let res1 = await fetch(httpUrl1);
        let result1 = await res1.json();
        let now = result1.now;
        this.timeDate = renderTime(now.obsTime);
        this.weekDay = weekDay(now.obsTime);
        this.cloudSpeed = now.windSpeed;
        this.precip = now.precip;
        this.wetNum = now.humidity;
        this.tmpNew = now.temp;
        this.briefNew = now.text;
        this.nowDayIcon = require("@/assets/" + now.icon + ".png");
        //七天
        let httpUrl2 = `https://devapi.qweather.com/v7/weather/3d?location=${id}&key=${key}`;
        let res2 = await fetch(httpUrl2);
        let result2 = await res2.json();
        let daily = result2.daily; // 数组
        let temp = [];
        daily.forEach(item => {
          temp.push({
            ...item,
            iconDay: require("@/assets/" + item.iconDay + ".png"),
            weekDay: weekDay(item.fxDate),
            tempMax: item.tempMax
            // icon: '../../imgs/weather/' + item.daily_forecast_today.cond_code_d+'.png',
          });
        });
        this.dailyArr = temp;
      },
      fullScreen() {
        this.$screenfull.toggle();
      },
      clickHandle(index) {
        // this.$message("查看监控画面");
        console.log(index);
        this.curIndex = index;
        this.dialogTableVisible = true;
      },
      scroll2() {
        let con1 = this.$refs.con2;
        con1.style.marginTop = "-30px";
        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function() {
          that.items2.push(that.items2[0]);
          that.items2.shift();
          con1.style.marginTop = "0px";
          that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 500);
      },
      mLeave2() {
        this.timer1 = setInterval(this.scroll, 3000);
      },
      mEnter2() {
        clearInterval(this.timer1);
      },
      leave(data) {
        this.updatewarning();
        var index;
        if (data[1] == 1) {
          index = this.warningtimestamps.findIndex(item => {
            return (
              item.timestamp.date == data[0].date &&
              item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
              item.timestamp.dateTime[0].time == data[0].dateTime[0].time
            );
          });
          this.$set(this.warningtimestamps[index].timestamp, "isCurent", false);
        } else {
          index = this.timestamps.findIndex(item => {
            return (
              item.timestamp.date == data[0].date &&
              item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
              item.timestamp.dateTime[0].time == data[0].dateTime[0].time
            );
          });
          this.$set(this.timestamps[index].timestamp, "isCurent", false);
        }
      },
      over(data) {
        clearInterval(timer);
        var index;
        if (data[1] == 1) {
          index = this.warningtimestamps.findIndex(item => {
            return (
              item.timestamp.date == data[0].date &&
              item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
              item.timestamp.dateTime[0].time == data[0].dateTime[0].time
            );
          });
          this.$set(this.warningtimestamps[index].timestamp, "isCurent", true);
        } else {
          index = this.timestamps.findIndex(item => {
            return (
              item.timestamp.date == data[0].date &&
              item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
              item.timestamp.dateTime[0].time == data[0].dateTime[0].time
            );
          });
          this.$set(this.timestamps[index].timestamp, "isCurent", true);
        }
      }
    }
  };
  </script>
  <style>
  .el-dialog__body {
    padding: 0;
  }
  
  .el-timeline-item__content {
    color: white;
  }
  
  .el-timeline-item__timestamp.is-bottom {
    color: skyblue;
  }
  
  .el-timeline-item__node--normal {
    background-color: skyblue;
  }
  
  .el-timeline-item__tail {
    border-left: 2px solid skyblue;
  }
  </style>
  <style scoped>
  .pos {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    white-space: nowrap;
  }
  .weather-temp {
    font-size: 0.2rem;
    margin-right: 4px;
  }
  .logo {
    margin-left: 0.125rem;
  }
  
  .fullDiv {
    height: 100%;
    margin-left: auto;
    margin-right: 0.185rem;
  }
  
  .fullScreen {
    background-color: #409eff;
    border-color: transparent;
    padding: 0 0.5rem;
    border: none;
    height: 60%;
    margin-top: 5%;
    color: #fff;
  }
  
  .fullScreen:hover,
  .fullScreen:focus {
    background-color: rgb(111, 146, 243);
    color: #fff;
  }
  
  .about {
    color: #fff;
    min-height: 100%;
    /* height: auto !important; */
    height: 100%;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-color: #06164a;
    /* background: url("../assets/image/background1.png") no-repeat center; */
  }
  
  .about_top {
    display: flex;
    background-color: rgb(16, 26, 81);
    padding: 0.1rem 0;
    height: 1rem;
  }
  
  .about_top p {
    margin: 0;
  }
  
  .about_top p img {
    height: 0.5rem;
  }
  
  .about_top p {
    width: 40%;
  }
  
  .about_top_l {
    width: 50%;
    font-size: 0.2rem;
    margin-left: 0.185rem;
    line-height: 0.3rem;
  }
  
  .about_top_r {
    width: 50%;
    font-size: 0.3rem;
    line-height: 0.3rem;
  }
  
  .aboutContainer {
    display: flex;
    height: calc(100% - 1.5rem);
    margin-top: 0.185rem;
    width: 98%;
    margin-left: 1%;
  }
  
  .containLeft {
    /* width: 4.75rem; */
    width: 25%;
  }
  
  #gaugePanel {
    /* background-color: #051d64; */
    margin-top: 0.1rem;
    height: 40%;
  }
  .MonitorRunning {
    flex: 1;
    /* background: url("../assets/image/lbg.png") no-repeat;
    background-size: cover; */
  }
  .MonitorRunning h1 {
    text-align: center;
    font-size: 0.2rem;
    padding: 6px 0;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    background: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgba(0, 88, 179, 0) 100%
    );
  }
  .MonitorRunning .running {
    width: 80%;
    margin: 0 auto;
    justify-content: space-between;
    height: calc(55% - 0.5rem);
    margin-top: 2%;
  }
  .MonitorRunning .running .run {
    text-align: center;
    height: 100%;
  }
  .MonitorRunning .running .run img {
    /* height: 0.7rem; */
    height: 50%;
  }
  .MonitorRunning .running .run p {
    color: #fff;
    font-size: 0.16rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
  }
  .successtag {
    /* border: 1px solid #00ff5f;
    border-radius: 2px;
    font-size: 10px;
    font-family: Source Han Sans CN;
    font-weight: 400; */
    color: #00ff5f;
    font-size: 0.16rem;
    /* line-height: 22px;
    text-shadow: 0px 2px 3px rgba(0, 129, 48, 0.4);
    padding: 5px 10px; */
  }
  .elbox {
    height: 40%;
    margin-top: 0.15rem;
  }
  .elbox5 {
    height: 15%;
    margin-top: 0.15rem;
  }
  .elbox1 {
    height: 100%;
  }
  
  .elbox2 {
    height: calc(100% - 4.2rem);
    margin-top: 0.1rem;
    background-color: #08285f4d;
  }
  
  .elbox3 {
    height: 10%;
  }
  
  .elbox4 {
    height: 35%;
    margin-top: 0.15rem;
  }
  
  .containcenterBox {
    /* flex: 1; */
    width: 50%;
    margin-left: 10px;
    margin-right: 10px;
    /* background: url("../assets/image/center.png") no-repeat top center;
    background-size: 100% 100%; */
  }
  
  .containcenter {
    box-sizing: border-box;
    /* background-color: rgb(16, 26, 81); */
    /* margin-top: 0.1rem; */
    margin-bottom: 0.1rem;
    /* border: 1px solid blue; */
    position: relative;
    height: calc(100% - 0.085rem);
  }
  
  .containcenter_top {
    height: 0.5rem;
    text-align: center;
  }
  
  .containcenter_top_title {
    font-size: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    padding: 6px 0;
    background: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgba(0, 88, 179, 0) 100%
    );
  }
  .containcenter_top_title3 {
    font-size: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    padding: 6px 0;
    background: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgba(0, 88, 179, 0) 100%
    );
    /* text-align: center;
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, -50%); */
  }
  .containcenter_top_title2 {
    font-size: 0.3rem;
    text-align: center;
    width: 100%;
  
    top: 1%;
  
    position: absolute;
  }
  .r_status {
    display: flex;
    margin-bottom: 2%;
  }
  .r_status .left {
    /* width: calc(302 / 531) * 100%; */
    width: 58.6%;
    height: 100%;
    position: relative;
    margin-right: 4px;
  }
  .r_status .right {
    width: 41.4%;
    height: 100%;
    position: relative;
  }
  .ab {
    position: absolute;
    top: -0.18rem;
  }
  .ab2 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .l-value {
    font-size: 0.18rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ff1e1e;
    left: calc(50% - 0.36rem);
  }
  .l-value2 {
    font-size: 0.18rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #fff;
    left: calc(50% - 0.18rem);
  }
  .r_status .left img,
  .r_status .right img {
    width: 100%;
  }
  .checkStatus,
  .checkOrder {
    width: 98%;
    /* height: 5.5rem; */
    overflow-y: auto;
    height: auto;
    margin: 0 auto;
    /* border: 1px solid rgb(111, 146, 243); */
    padding-bottom: 0.1rem;
  }
  .checkStatus {
    margin-bottom: 2%;
  }
  .checkOrder {
    height: calc(100% - 0.2rem);
    overflow-y: auto;
    overflow-y: scroll;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
    position: relative;
  }
  /* .checkOrder {
    background: url("../assets/image/b-bg.png") no-repeat top center;
    background-size: 100% 100%;
  } */
  .containcenter_top > p {
    font-size: 0.25rem;
  }
  
  .containRight {
    width: 25%;
    /* margin-top: 0.1rem; */
  }
  
  .containcenter_con {
    /* height: calc(100% - 0.5rem); */
    /* height: 62.6%; */
    height: calc(100% - 0.185rem);
    width: 98%;
    margin-left: 1%;
    position: relative;
  }
  .personDesc {
    position: absolute;
    top: 10%;
    left: 10%;
  }
  .personDesc p:nth-child(1) {
    margin-bottom: 10px;
  }
  .personDesc p img {
    width: 0.2rem;
  }
  .personDesc p span {
    font-size: 0.18rem;
  }
  .containcenter_con_top {
    width: 100%;
    height: 70%;
  }
  
  .containcenter_con_bottom {
    display: flex;
    height: 100%;
    /* height: 25%; */
    /* height: 2.5rem; */
  }
  
  .timeline {
    margin-left: 1%;
    /* margin-top: 0.185rem; */
    width: 100%;
    /* border: 1px solid rgb(111, 146, 243); */
    /* height: 100%; */
    /* overflow: hidden; */
    overflow-y: auto;
    overflow-y: scroll;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
  }
  .timeline0 {
    margin-top: 2%;
  }
  .timeline::-webkit-scrollbar,
  .checkOrder::-webkit-scrollbar {
    width: 2px;
    /*height: 4px;*/
  }
  
  .timeline::-webkit-scrollbar-thumb,
  .checkOrder::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  
  .timeline::-webkit-scrollbar-track,
  .checkOrder::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  
  .flexBox {
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    margin-left: 2%;
  }
  .flex {
    display: flex;
  }
  .leftBoxWrap {
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    width: 49%;
  }
  
  .leftBox {
    /* width: 48%; */
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  .leftBox:nth-child(even) {
    margin-left: 0.185rem;
  }
  
  .statusDesc {
    width: 50%;
    color: #02a6b5;
    line-height: 0.35rem;
  }
  
  .statusing {
    margin-left: auto;
    margin-right: 0.285rem;
  }
  
  .imgBox {
    height: 100%;
    position: relative;
  }
  
  .imgBoxImg {
    width: 100%;
    height: 100%;
  }
  
  .icon {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
  }
  
  .icon0 {
    /* top: 0.15rem;
    left: 1.05rem; */
    top: 1%;
    left: 8%;
    z-index: 33;
  }
  
  .icon1 {
    /* top: 0.15rem;
    left: 4.1rem; */
    top: 1%;
    left: 30%;
    z-index: 33;
  }
  
  .icon2 {
    top: 1%;
    left: 60%;
    z-index: 33;
  }
  
  .icon3 {
    top: 1%;
    left: 90%;
    z-index: 33;
  }
  
  .icon4 {
    top: 15%;
    left: 8%;
  }
  
  .icon5 {
    top: 15%;
    left: 30%;
  }
  
  .icon6 {
    top: 15%;
    left: 60%;
  }
  
  .icon7 {
    top: 15%;
    left: 90%;
  }
  
  .icon8 {
    top: 35%;
    left: 8%;
  }
  
  .icon9 {
    top: 35%;
    left: 30%;
  }
  
  .icon10 {
    top: 35%;
    left: 60%;
  }
  
  .icon11 {
    top: 35%;
    left: 90%;
  }
  
  .icon12 {
    top: 55%;
    left: 8%;
  }
  
  .icon13 {
    top: 55%;
    left: 18%;
  }
  
  .icon14 {
    top: 55%;
    left: 60%;
  }
  
  .icon15 {
    top: 55%;
    left: 88%;
  }
  .leftT {
    height: 32%;
    background-color: #08285f4d;
    margin-bottom: 2%;
  }
  .leftB {
    /* height: 70%; */
    height: calc(66% - 42px);
  }
  .leftB h1 {
    text-align: center;
    font-size: 0.2rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    padding: 6px 0;
    background: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgba(0, 88, 179, 0) 100%
    );
    margin-bottom: 13px;
  }
  .wetstatus {
    width: 98%;
    margin-left: 1%;
  }
  .boxW {
    width: 100%;
    height: calc(25% - 0.15rem);
    background: url("../assets/image/lb.png") no-repeat top center;
    display: flex;
    background-size: 100% 100%;
    align-items: center;
    margin-top: 13px;
  }
  .boxW .left {
    position: relative;
    width: 33.3%;
    height: 100%;
  }
  .boxW .left span {
    color: #f08300ff;
  }
  .boxW .center {
    width: 30%;
  }
  .boxW .right {
    width: 33.3%;
    margin-left: auto;
  }
  .boxW .center p {
    text-align: center;
  }
  .boxW .center p span {
    font-size: 0.16rem;
  }
  .boxW .center p .strong {
    font-size: 0.28rem;
    font-family: Bahnschrift;
    font-weight: normal;
    color: #ffffff;
  }
  .boxW .right .successState {
    display: inline-block;
    border: 1px solid #00ff5f61;
    border-radius: 2px;
    font-size: 0.14rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00ff5f;
    text-shadow: 0px 2px 3px rgba(0, 129, 48, 0.4);
    padding: 0.02rem 0.08rem;
    margin-left: 25%;
  }
  .mt {
    margin-top: 5%;
  }
  .boxW .left img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
  }
  .boxW .left span {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    font-size: 0.22rem;
  }
  .totalNum {
    display: flex;
    /* margin-top: 0.2rem; */
    height: 1rem;
    /* margin-top: calc(100% - 1.5rem);
      margin-left: 0.2rem; */
    padding: 0 0.25rem;
    margin-top: calc(50% - 0.758rem);
  }
  .wetnum {
    color: #02a6b5;
    font-size: 0.25rem;
    margin-left: 0.1rem;
  }
  .statusBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .wetDesc {
    line-height: 0.25rem;
    margin-left: 0.1rem;
  }
  
  .success {
    color: chartreuse;
  }
  
  .fail {
    color: red;
  }
  
  .imglist {
    height: 50%;
  }
  
  .imglist img {
    height: 98%;
    width: 98%;
    margin-left: 1%;
    margin-top: 1%;
  }
  
  #box {
    overflow: hidden;
    transition: all 0.5s;
    height: 2.35rem;
    position: relative;
    /* background: rgba(255, 255, 255, 0.04); */
    background-color: #08285f4d;
  }
  
  .anim {
    transition: all 0.5s;
  }
  
  #con2 {
    padding-top: 0.25rem;
  }
  
  #con2 li {
    line-height: 0.35rem;
    width: 100%;
    /* background-color: rgb(22, 24, 24); */
  
    /* border-bottom: 1px solid #fff; */
    position: relative;
    padding: 3px 0.1rem;
    display: table;
  }
  #con2 li:nth-child(even) {
    background: rgba(1, 84, 172, 0.24);
  }
  .li_absolute {
    display: none;
  }
  #con2 li span {
    display: table-cell;
    vertical-align: middle;
    width: 33.3%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    font-size: 0.16rem !important;
  }
  /* #con2 li:hover .li_absolute {
    display: block;
    position: absolute;
    top: -100%;
  
    background-color: #0154acff;
    color: #fff;
    font-size: 0.16rem;
  } */
  
  .wrapBoxFlex {
    /* background-color: blueviolet; */
    /* display: flex;
    justify-content: center;
    align-content: center; */
  }
  
  .pTitle {
    width: 100%;
    height: 0.35rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #08285ff8;
  }
  .pTitle span {
    display: inline-block;
    width: 33.3%;
    color: #70bcfaff;
    font-size: 0.2rem;
    text-align: center;
    padding: 0.05rem 0;
  }
  
  .center {
    justify-content: space-around;
  }
  
  .panel {
    position: relative;
    /* height: 3.875rem; */
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: rgba(255, 255, 255, 0.04) url(../assets/line\(1\).png);
    /* padding: 0 0.1875rem 0; */
    margin-bottom: 0.15rem;
  }
  
  .panel::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    border-radius: 20%;
  }
  
  .panel::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    border-radius: 20%;
  }
  
  .panel .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  
  .panel .panel-footer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    border-radius: 20%;
  }
  
  .panel .panel-footer::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    border-radius: 20%;
  }
  
  /* @media only screen and (max-width: 1366px) {
    .leftBoxWrap {
      width: 100%;
    }
  } */
  @media only screen and (max-width: 768px) {
    .aboutContainer {
      flex-wrap: wrap;
    }
  
    .wetstatus {
      width: 100%;
      justify-content: space-around;
    }
  
    .containRight,
    .containLeft,
    .containcenter {
      flex: 1;
      width: 100%;
    }
  }
  
  .container {
    width: 2rem;
    height: 2rem;
    position: absolute;
    z-index: 100;
    right: 0;
  }
  .delete {
    text-align: right;
    margin-right: 4px;
  }
  .type {
    text-align: center;
  }
  
  .ico {
    position: absolute;
    left: 20%;
    top: 29%;
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.04) url(../assets/warning.png) no-repeat
      center;
    background-size: 100%;
  }
  /*动画*/
  
  .ico {
    -webkit-animation: Tada 1s 2s both infinite;
    -moz-animation: Tada 1s 2s both infinite;
    -ms-animation: Tada 1s 2s both infinite;
    animation: Tada 1s 2s both infinite;
  }
  /*浏览器兼容性部分略过*/
  
  @keyframes Tada {
    0% {
      transform: scale(1);
      transform: scale(1);
    }
    10%,
    20% {
      transform: scale(0.9) rotate(-3deg);
      transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
      transform: scale(1.1) rotate(3deg);
      transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
      transform: scale(1.1) rotate(-3deg);
      transform: scale(1.1) rotate(-3deg);
    }
    100% {
      transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
    }
  }
  </style>
  